<template>
  <!-- <div id="skrollr-body"> -->
    <div class="scrm-sprite-big" id="sprite1" ref="sprite_01" data-0="background-position:0px 0px;" data-end="background-position:-500px -1000px;">
      <!-- <img :src="img1"/> -->
      <div class="cover"></div>
    </div>
    <div class="scrm-sprite-big" id="sprite2" ref="sprite_02">
      <!-- <img :src="img2"/> -->
      <div class="cover"></div>
    </div>
    <div class="scrm-sprite-big" id="sprite3" ref="sprite_03">
      <!-- <img :src="img3"/> -->
      <div class="cover"></div>
    </div>
    <div class="scrm-sprite-big" id="sprite4" ref="sprite_04">
      <!-- <img :src="img4"/> -->
      <div class="cover"></div>
    </div>
  <!-- </div> -->
</template>

<style lang="scss">
  @import '../scss/index.scss';

  #sprite1 {
    background-image: url('http://oodoa7x5e.bkt.clouddn.com/scrm_1.png');
  }

  #sprite2 {
    background-image: url('http://oodoa7x5e.bkt.clouddn.com/scrm_2.png');
  }

  #sprite3 {
    background-image: url('http://oodoa7x5e.bkt.clouddn.com/scrm_3.png');
  }

  #sprite4 {
    background-image: url('http://oodoa7x5e.bkt.clouddn.com/scrm_4.png');
  }
  .scrm-sprite-big {
    position: relative;
    // background-color: grey;
    // margin-bottom: -7px;
    background-repeat: no-repeat;
    height: 100%;
    color: white;
    background-size: contain;
    min-height: 100%;
    white-space: nowrap;
    position: relative;
    min-width: 100%;

    .cover {
      position: absolute;
      width: 100%;
      margin:0;
    }

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
      margin: 0 auto;
      display: block;
    }
  }

  .scroll-container {
    overflow-x: hidden;
    overflow-y: scroll;
  }
</style>

<script>
import Header from 'components/Header'
import { Button } from 'element-ui'
import config from '../config/common'
import $ from 'webpack-zepto'
import Q from 'q'

let Velocity

export default {
  data () {
    const IMG_HOST = config.IMG_HOST
    return {
      docHeight: '',
      img1: IMG_HOST + '/scrm_1.png',
      img2: IMG_HOST + '/scrm_2.png',
      img3: IMG_HOST + '/scrm_3.png',
      img4: IMG_HOST + '/scrm_4.png'
    }
  },
  methods: {
    calDocHeight () {
      this.tid && clearTimeout(this.tid)
      this.tid = setTimeout(() => {
        this.docHeight = 'height: ' + (window.innerHeight) + 'px'
      }, 500)
    },
    loadScript (url, callback) {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      if (typeof (callback) !== 'undefined') {
        if (script.readyState) {
          script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
              script.onreadystatechange = null
              callback()
            }
          }
        } else {
          script.onload = function () {
            callback()
          }
        }
      }
      script.src = url
      document.body.appendChild(script)
    },
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    scroll: function (el, translateY, done) {
      // Velocity(el, { translateY: translateY }, { duration: 300 })
    }
  },
  components: {
    'ElButton': Button,
    'ELHeader': Header
  },
  mounted () {
    $(window).on('resize', (e) => {
      this.calDocHeight()
    })
    Q.promise((resolve, error) => {
      this.loadScript('http://oodoa7x5e.bkt.clouddn.com/jsskrollr.min.js', resolve)
    }).then(() => {
      var s = skrollr.init({
    		edgeStrategy: 'set',
    		easing: {
    			WTF: Math.random,
    			inverted: function (p) {
    				return 1 - p
    			}
    		}
    	})
      console.log(s, 'skrollr')
    })

    this.calDocHeight()
  }
}
</script>
